<template>
  <div class="container">
    <ul class="nav">
      <li class="nav_item"
          @click="hotBtn"
          :class="mark1?'':'red'">销量</li>
      <li class="nav_item"
          @click="scoreBtn"
          :class="mark2?'':'red'">人气</li>
      <li class="nav_item"
          @click="priceBtn"
          :class="mark3?'':'red'">价格
        <span v-if="mark3">
          <img :src="ImgBaseUrl + 'shang-hui@2x.png'"
               class="nav_up">
          <img :src="ImgBaseUrl + 'xia-hui@2x.png'"
               class="nav_down">
        </span>
        <span v-if="ishow3">
          <img :src="ImgBaseUrl + 'shang-hui@2x.png'"
               class="nav_up">
          <img :src="ImgBaseUrl + 'xia-hong@2x.png'"
               class="nav_down">
        </span>
        <span v-if="ishidden3">
          <img :src="ImgBaseUrl + 'shang-hong@2x.png'"
               class="nav_up">
          <img :src="ImgBaseUrl + 'xia-hui@2x.png'"
               class="nav_down">
        </span>
      </li>
    </ul>
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%','background':'#f3f4f6'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh"
                 class="scroll-view">
      <div class="advert"
           v-if="advert">
        <img :src="imgUrl+advert.image"
             mode="widthFix"
             class="img"
             @click="toAdvertDetail(advert)">
      </div>
      <mallList :mallList="mallList"
                v-if="!bgStyle"></mallList>
      <p class="bottomtext" v-if="isbottom && !bgStyle">因为甄选，所以珍稀</p>
      <div class="bg"
           v-if="bgStyle">
        <img src="https://h5.ameimeika.com/mp_images/shouye/sousuowujieguo@2x.png"
             alt=""
             class="bg_img">
        <p class="text">没有找到宝宝查看的内容</p>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import mallList from "@/components/mall_List/mall_List";
import imageurl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      searchVal: "",
      mark1: true,
      mark2: true,
      mark3: true,
      ishow3: false,
      ishidden3: false,
      imgUrl: imageurl,
      bannerImg: [],
      mallList: [],
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      hot: "",   //销量
      price: "",
      star: "",  //人气
      bgImg: false,
      project_list: "",
      str: "",
      isbottom: false,
      pageNum: 1,
      longitude: "",
      latitude: "",
      province_id: 13,
      province: '',
      advert: '',//广告
      bgStyle: false,
      type: ''  //-1为健康，0为口腔
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    let that = this;
    this.isbottom = false;
    this.str = options.url;
    if (options.project_name) {
      wx.setNavigationBarTitle({
        title: options.project_name
      });
    }
    if (options.type) { //健康-1、口腔0、医美2
      this.type = options.type
    }
    let addressObj;
    if (wx.getStorageSync("province_info")) {
      addressObj = JSON.parse(wx.getStorageSync("province_info")).province_id;
    }
    if (addressObj) {
      this.province = addressObj;
      this.get_location();
    } else {
      this.getData();
    }
  },
  components: {
    mallList
  },
  methods: {
    //销量
    hotBtn () {
      this.isbottom = false;
      this.mark2 = true;
      this.mark3 = true;
      this.ishow3 = false;
      this.ishidden3 = false;
      // 取反
      this.mark1 = false;
      this.hot = 2
      this.star = "";
      this.price = "";
      this.pageNum = 1;
      this.getData(this.hot);
    },
    //人气
    scoreBtn () {
      this.isbottom = false;
      this.mark1 = true;
      this.mark3 = true;
      this.ishow3 = false;
      this.ishidden3 = false;
      // 取反
      this.mark2 = false;
      this.star = 2;
      this.hot = "";
      this.price = "";
      this.pageNum = 1;
      this.getData(this.hot);
    },
    //价格筛选
    priceBtn () {
      this.isbottom = false;
      this.mark1 = true;
      this.ishow1 = false;
      this.ishidden1 = false;
      this.mark2 = true;
      this.ishow2 = false;
      this.ishidden2 = false;
      // 取反
      this.mark3 = false;
      this.ishow3 = !this.ishow3;
      this.ishidden3 = !this.ishow3;
      if (this.ishow3) {
        this.price = 1;
      } else if (this.ishow3 == false) {
        this.price = 2;
      }
      this.hot = "";
      this.star = "";
      this.pageNum = 1;
      this.getData(this.price);
    },
    getData (e) {
      if (this.isbottom) {
        return false;
      }
      common.mmk_Loading(0)
      let type_id;
      if (this.type == -1) { //健康
        type_id = 2;
      } else if (this.type == 0) { //口腔
        type_id = 1;
      } else if (this.type == 2) { //医美
        type_id = 0;
      }
      let obj = {
        pbcId: this.str,
        pageNum: this.pageNum,
        pageSize: 10,
        lat: this.latitude+'',
        lng: this.longitude+'',
        isDashboard: 0,
        provinceId: this.province,
        type: type_id
      };
      if (!this.hot == "") {
        obj.sales_sort = this.hot;
      } else if (!this.star == "") {
        obj.star_sort = this.star;
      } else if (!this.price == "") {
        obj.price_sort = this.price;
      }
      let that = this;
      setTimeout(() => {
        common.fly_post("api/com.mmk.reservation.api.OpenProjectProvider/1.0.0/projectList.html", obj, msg => {
          common.mmk_Loading(1)
          let res = msg.data;
          if (res.code == 0) {
            if (res.data.bcName) {
              wx.setNavigationBarTitle({
                title: res.data.bcName
              })
            }
            if (res.data.get_ads) {
              this.advert = res.data.getAds;
            }
            if (res.data.projectData.length == 0 && this.pageNum > 1) {
              // common.mmk_Loading(2, '已经到最底下了')
              this.isbottom = true;
              return false;
            }
            if (res.data.projectData.length == 0 && this.pageNum == 1) {
              //加载无数据显示背景图
              this.isbottom = true;
              this.bgStyle = true;
            }
            if (res.data.projectData.length > 0 && this.pageNum == 1) {
              this.mallList = res.data.projectData;
              console.log(this.mallList)
            } else {
              this.mallList.push(...res.data.projectData);
            }
          } else {
            common.mmk_Loading(2, res.message)
            return false;
          }
        },'isjava')
      }, 200);
    },
    toMalldetail (id, name) {
      wx.navigateTo({
        url: `/pages/package_projects/project_detail/main?id=${id}&mallname=${name}`
      });
    },
    scroll (e) { },
    pullrefresh (e) {
      this.pageNum++;
      this.getData();
    },
    get_location () {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success () {
          wx.getLocation({
            type: 'gcj02',
            success (res) {
              that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              that.getData(that.str);
            },
            fail () {
              wx.showToast({
                title: "无法获取地理位置",
                icon: "none",
                duration: 2000,
                mask: true
              });
              that.province = "湖北";
              that.province_id = 13;
              that.getData();
            }
          });
        },
        fail () {
          that.province = "湖北";
          that.province_id = 13;
          that.getData();
        }
      });
    },
    toAdvertDetail (item) {  //广告位跳转
      common.to_detail(item)
    }
  }
};
</script>
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  background-color: #f3f4f6;
  .nav {
    width: 100%;
    height: 48px;
    position: relative;
    background-color: #fff;
    &::before,
    &::after {
      content: "";
      width: 100%;
      height: 0.5px;
      background-color: #f3f4f6;
      position: absolute;
      left: 0;
    }
    &::nav::before {
      top: 0;
    }
    &.nav::after {
      bottom: 0.1%;
    }
    .nav_item {
      width: 31.3%;
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      color: #666;
      float: left;
      position: relative;
      &.red {
        color: #ff383e;
      }
      .nav_up,
      .nav_down {
        width: 7px;
        height: 4px;
        position: absolute;
        left: 70%;
      }
      .nav_up {
        top: 35%;
      }
      .nav_down {
        bottom: 37%;
      }
    }
  }
  .advert {
    width: 100%;
    min-height: 115px;
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #fff;
    .img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .bg {
    width: 100%;
    height: 100%;
    text-align: center;
    .bg_img {
      width: 128px;
      height: 118px;
      margin-top: 108px;
    }
    .text {
      color: #666;
      opacity: 0.7;
      margin-top: 5px;
    }
  }
  .bottomtext{
      width: 100%;
      height: 60px;
      font-size:12px;
      font-weight:400;
      color:rgba(153,153,144,1);
      text-align: center;
      line-height: 60px;
    }
}
</style>


